<template>
	<view class="bg_color">
		<!-- banner 开始 -->
		<view class="dbanner">
			<!-- <view class="flex-row group_2">
				<image :src="base.logo" class="image" />
				<text class="text">{{base.site_name}}</text>
			</view> -->
			<u-swiper border-radius=0 @click="jump" mode="round" name="image" :height="500" :list="banner"
				duration="800" interval="4500"></u-swiper>
		</view>

		<!-- banner 结束 -->
		<view :key="i" v-for="(item, i) in data">

			<!-- 案例开始 -->
			<view v-if="item.name === 'case'" class="flex-col dcase">
				<view class="flex-row">
					<view class="left-section view"> </view>
					<view class="flex-col group_6">
						<image src="/static/bg/case.png" class="image_2" />
						<text class="text_3">案例欣赏</text>
						<text class="text_4">Case appreciation</text>
					</view>
				</view>
				<view class="flex-col group_7" v-if="dcase.length">
					<image @click="pageToDetail('/pages/case-detail/case-detail', dcase[0]['_id'])"
						:src="dcase[0]['image']" class="image_3" />
					<view @click="pageToDetail('/pages/case-detail/case-detail', dcase[0]['_id'])"
						class="flex-col group_8">
						<text class="text_5">{{dcase[0]['name']}}</text>
						<text class="text_6 text_7">{{dcase[0]['describe']}}</text>
					</view>
					<view class="flex-row list">
						<view @click="pageToDetail('/pages/case-detail/case-detail', item._id)" v-if="i > 0"
							class="list-item flex-col" :key="i" v-for="(item, i) in dcase">
							<image class="image_4" :src="item.image" />
							<text class="text_8">{{item.name}}</text>
							<text class="text_10">{{item.describe}}</text>
						</view>
					</view>
					<view @click="pageTo('/pages/case/case')" class="button flex-row section_3">
						<text class="text_14">查看更多</text>
						<image src="/static/bg/more.png" class="image_7" />
					</view>
				</view>
			</view>
			<!-- 案例结束 -->

			<!-- 产品开始 -->
			<view v-if="item.name === 'product'" class="flex-col dproduct">
				<view class="flex-col">
					<view class="flex-row group_13">
						<view class="left-section view_1"> </view>
						<view class="right-group flex-col items-center">
							<image src="/static/bg/product.png" class="image_9" />
							<text class="text_16">产品介绍</text>
						</view>
					</view>
					<text class="text_6 text_18">Product display</text>
				</view>
				<view @click="pageToDetail('/pages/product-detail/product-detail', item._id)" class="flex-col group_14"
					:key="i" v-for="(item, i) in product">
					<view v-if="i == 0" class="group_15 flex-row view_3">
						<image :src="item.image" class="image_10" />
						<text class="text_19">{{item.name}}</text>
						<text class="text_21 u-line-5">{{item.describe}}</text>
					</view>
					<view v-if="i == 1" class="group_15 flex-row">
						<text class="text_22">{{item.name}}</text>
						<text class="text_23 u-line-5">{{item.describe}}</text>
						<image :src="item.image" class="image_12" />
					</view>
					<view v-if="i == 2" class="flex-row group_16">
						<image :src="item.image" class="image_10" />
						<text class="text_19">{{item.name}}</text>
						<text class="text_25 u-line-5">{{item.describe}}</text>
					</view>
					<view v-if="i == 3" class="group_15 flex-row">
						<text class="text_26">{{item.name}}</text>
						<text class="text_27 u-line-5">{{item.describe}}</text>
						<image :src="item.image" class="image_12" />
					</view>
				</view>
				<view @click="pageTo('/pages/product/product')" class="button flex-row section_4">
					<text class="text_14">查看更多</text>
					<image src="/static/bg/more.png" class="image_7" />
				</view>
			</view>
			<!-- 产品结束 -->

			<!-- 关于我们开始 -->
			<view v-if="item.name === 'aboutus'" class="flex-col group_17">
				<view class="flex-col">
					<view class="flex-row group_19">
						<view class="left-section view_6"> </view>
						<view class="right-group flex-col items-center">
							<image src="/static/bg/aboutus.png" class="image_17" />
							<text class="text_16">团队成员</text>
						</view>
					</view>
					<text class="text_6 text_30">About us</text>
				</view>
				<view class="bottom-group flex-col s_aboutus">

					<u-swiper @change="aboutusChange" mode="round" border-radius=6 indicator-pos="bottomRight"
						name="image" :height="600" :autoplay=false :list="aboutus" duration="500"></u-swiper>
					<view class="flex-col group_20">
						<view class="section_5"> </view>
						<view class="flex-col section_6">
							<view class="flex-col">
								<view class="justify-between group_22">
									<view class="flex-col">
										<text class="text_31">{{aboutus[aboutusIndex].name}}</text>
										<text class="text_6 text_32">{{aboutus[aboutusIndex].position}}</text>
									</view>
									<view class="flex-row group_24">

									</view>
								</view>
								<view class="flex-row">
									<view class="section_9"> </view>
									<view class="divider_2"> </view>
								</view>
							</view>
							<view class="flex-col group_25 ">
								<text class="text_6 u-line-4">{{aboutus[aboutusIndex].describe}}</text>
							</view>
						</view>
					</view>
					<view @click="pageTo('/pages/aboutus/aboutus')" class="button flex-row section_10">
						<text class="text_14">查看更多</text>
						<image src="/static/bg/more.png" class="image_7" />
					</view>
				</view>
			</view>
			<!-- 关于我们结束 -->

			<!-- 公司介绍开始 -->
			<view v-if="item.name === 'introduce'" class="flex-col s_introduce">
				<view class="flex-col">
					<view class="flex-row group_28">
						<view class="left-section view_12"> </view>
						<view class="right-group flex-col items-center">
							<image src="/static/bg/introduce.png" class="image_20" />
							<text class="text_37">公司介绍</text>
						</view>
					</view>
					<text class="text_6 text_38">Company introduction</text>
				</view>
				<view class="flex-col group_29">
					<view class="flex-col group_30">
						<u-swiper mode="round" name="image" :height="500" :autoplay=false :list="introduce.image"
							duration="500"></u-swiper>
						<text class="text_6 text_39">{{introduce.describe}}</text>
					</view>
					<view @click="pageTo('/pages/introduce/introduce')" class="button flex-row">
						<text class="text_14">查看更多</text>
						<image src="/static/bg/more.png" class="image_7" />
					</view>
				</view>
			</view>
			<!-- 公司介绍结束 -->
			<!-- 发展历程开始 -->
			<view v-if="item.name === 'history'" class="dhistory">
				<view class="flex-col">
					<view class="flex-row group_33">
						<view class="left-section view_14"> </view>
						<view class="flex-col items-center group_34">
							<image src="/static/bg/history1.png" class="image_25" />
							<image src="/static/bg/history2.png" class="image_26" />
							<text class="text_41">发展历程</text>
						</view>
					</view>
					<text class="text_6 text_42">development history</text>
				</view>
				<!-- item -->
				<view class="flex-col group_43">
					<view :key="i" v-for="(item, i) in history">
						<view class="flex-row group_44">
							<view class="flex-col group_45">
								<image src="/static/bg/yuan.png" class="image_27 image_34" />
								<text class="text_51">{{item.name}}</text>
							</view>
							<text class="text_6 text_52">年</text>
							<view class="section_15"> </view>
						</view>
						<view class="flex-row group_46">
							<image :src="item.image" class="image_29 image_35" />
							<text class="text_6 text_53 u-line-4">{{item.describe}}</text>
						</view>
					</view>

					<!-- 查看更多 -->
					<view @click="pageTo('/pages/history/history')" class="justify-center button_1">
						<text>查看更多</text>
						<image src="/static/bg/more.png" class="image_7 image_37" />
					</view>
				</view>

			</view>
			<!-- 发展历程结束 -->

			<!-- 新闻动态开始 -->
			<view v-if="item.name === 'news'" class="flex-col dnews">
				<view class="flex-col">
					<view class="flex-row group_50">
						<view class="left-section view_20"> </view>
						<view class="right-group flex-col items-center">
							<image src="/static/bg/news.png" class="image_38" />
							<text class="text_16">新闻动态</text>
						</view>
					</view>
					<text class="text_6 text_57">news information</text>
				</view>
				<view class="flex-col group_51">
					<!-- item -->
					<view @click="pageToDetail('/pages/news-detail/news-detail', item._id)" :key=i
						v-for="(item, i) in news">
						<view class="flex-col">
							<text class="text_6 text_58">{{item.name}}</text>
							<text class="text_6 text_59">{{item._add_time_str}}</text>
						</view>
						<text class="text_6 text_60">{{item.describe}}</text>
						<view class="right-section"> </view>
					</view>

					<view @click="pageTo('/pages/news/news')" class="button flex-row section_15">
						<text class="text_14">查看更多</text>
						<image src="/static/bg/more.png" class="image_7" />
					</view>
				</view>
			</view>
			<!-- 新闻动态结束 -->

			<!-- 合作伙伴开始 -->
			<view v-if="item.name === 'partner'" class="flex-col group_54">
				<view class="flex-col">
					<view class="flex-row group_56">
						<view class="left-section view_22"> </view>
						<view class="right-group flex-col items-center">
							<image src="/static/bg/partner.png" class="image_40" />
							<text class="text_16">合作伙伴</text>
						</view>
					</view>
					<text class="text_6 text_66">news information</text>
				</view>
				<view class="flex-col group_57">
					<view class="grid">
						<view :key=i v-for="(item, i) in partner">
							<image :src="item.image" class="image_29" />
						</view>
					</view>
				</view>
			</view>
			<!-- 合作伙伴结束 -->

			<!-- 联系我们开始 -->
			<view v-if="item.name === 'link' || item.name === 'beian' || item.name === 'info'"
				class="flex-col group_58">
				<view style="margin-top: 58rpx;" v-if="item.name === 'link'">
					<view class="flex-col">
						<view class="flex-row group_60">
							<view class="left-section view_24"> </view>
							<view class="right-group flex-col items-center">
								<image src="/static/bg/callus.png" class="image_47" />
								<text class="text_16">联系我们</text>
							</view>
						</view>
						<text class="text_6 text_68">contact us</text>
					</view>
					<view class="bottom-group flex-col view_26">
						<u-form :model="form" ref="uForm">
							<u-form-item>
								<u-input height="86" style="background-color: white;" border-color="#D19A60"
									:border="true" placeholder="请输入您的姓名" v-model="form.name" />
							</u-form-item>
							<u-form-item>
								<u-input height="86" style="background-color: white;" border-color="#D19A60"
									:border="true" placeholder="请输入您的手机号" v-model="form.mobile" />
							</u-form-item>
							<u-form-item>
								<u-input height="86" style="background-color: white;" border-color="#D19A60"
									:border="true" placeholder="请输入您的邮箱" v-model="form.email" />
							</u-form-item>
							<u-form-item>
								<u-input height="86" style="background-color: white;" border-color="#D19A60"
									:border="true" placeholder="请输入您的微信/QQ" v-model="form.wx" />
							</u-form-item>
							<u-form-item>
								<u-input height="200" style="background-color: white;" border-color="#D19A60"
									:border="true" type="textarea" placeholder="请输入您要留言的内容" v-model="form.mark" />
							</u-form-item>
							<view @click="submit" class="flex-col items-center button_2">
								<text>提交留言</text>
							</view>
						</u-form>
					</view>
				</view>
				<view v-if="item.name === 'info'" class="flex-col section_16">
					<text class="text_76">{{base.company}}</text>
					<text class="text_77">地址：{{base.address}}</text>
					<text class="text_78">邮编：{{base.code}}</text>
					<text class="text_79">电话：{{base.landline}}</text>
					<text class="text_80">手机：{{base.mobile}}</text>
					<text class="text_81">邮箱：{{base.email}}</text>
				</view>
				<view v-if="item.name === 'beian'" class="flex-col items-center text-wrapper_3">
					<text>{{base.beian}}</text>
				</view>
			</view>
			<!-- 联系我们结束 -->
		</view>
		<!-- 悬浮客服开始 -->
		<view>
		<!-- #ifdef MP -->
			<button class='share-img-button' open-type="contact" plain="true">
				<image src="/static/kefu.png" mode="aspectFit"></image>
			</button>
			<!-- <drag-button :isDock="false" :existTabBar="true" @btnClick="btnClick" /> -->
		<!-- #endif -->
		</view>
		
		<!-- 悬浮客服结束 -->
		
		<u-tabbar :list="tabbar" :mid-button="false"></u-tabbar>
	</view>
</template>


<script>
	import dragButton from "@/components/drag-button/drag-button.vue";
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		components: {
			dragButton
		},
		data() {
			// 页面数据变量
			return {
				//留言表单信息
				form: {},
				// 自定义信息
				aboutusIndex: 0,
				data: [],
				tabbar: [],
				minButton: false,
				banner: [], //banner
				base: [], //系统信息
				dcase: [ //案例数据
				],
				product: [ //产品信息

				],
				history: [], //发展历程
				aboutus: [], //关于我们
				introduce: [], //发展历程
				news: [], //新闻资讯
				partner: [], //合作伙伴
				// 表单请求数据
				form1: {

				},
				scrollTop: 0,
			}
		},
		onShow() {
			uni.hideTabBar()
		},
		onPageScroll(e) {
			that.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init();

		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {

		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {

		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {

		},
		// 监听 - 页面触底部
		onReachBottom() {

		},
		// 监听 - 窗口尺寸变化(仅限:App、微信小程序)
		onResize() {

		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {

		},
		// 监听 - 页面创建时
		created() {

		},
		// 函数
		methods: {
			submit() {
				that.$api.sendMessage({
						from: that.form
					}).then((data) => {
					if (data.code == 0) {
						that.form = {}
						vk.toast('留言成功~')
					} else {
						vk.toast('网络开小差了~')
					}
				}).catch((err) => {
					
				})
			},
			// 轮播图点击
			jump(index) {
				let url = that.banner[index]['url'];
				console.log('点击了图片');
				let type = url.substr(0, 1)
				if (type == 'h') {
					vk.navigateTo("/pages/web-view/web-view?url=" + url)
					return;
				}
				if (type == '/') {
					vk.navigateTo(url)
					return;
				}
				return;
			},
			//点击客服
			btnClick() {
				// #ifdef MP-WEIXIN
				// #endif
				// #ifdef H5
				uni.makePhoneCall({
					phoneNumber: that.base.mobile //仅为示例
				});
				// #endif
			},
			// 页面数据初始化函数
			init() {
				// 优先显示本地缓存
				uni.getStorage({
					key: 'base_info',
					success: res => {
						let data = res.data
						that.data = data.base.data;
						that.tabbar = data.tabbar;
						// that.minButton = data.minButton;
						that.banner = data.banner;
						that.dcase = data.dcase;
						that.base = data.base;
						that.product = data.product;
						that.history = data.history;
						that.news = data.news;
						that.partner = data.partner;
						that.aboutus = data.aboutus;
						that.introduce = data.introduce;
					}
				})
				
				that.$api.index().then((data) => {
					if (data.code == 0) {
						that.data = data.base.data;
						that.tabbar = data.tabbar;
						// that.minButton = data.minButton;
						that.banner = data.banner;
						that.dcase = data.dcase;
						that.base = data.base;
						that.product = data.product;
						that.history = data.history;
						that.news = data.news;
						that.partner = data.partner;
						that.aboutus = data.aboutus;
						that.introduce = data.introduce;
						uni.setStorageSync('base_info', data)
					} else {
						vk.toast('网络开小差了~')
					}
				}).catch((err) => {
				});
			},
			pageToDetail(path, id) {
				vk.navigateTo(path + '?_id=' + id);
			},
			aboutusChange(e) {
				this.aboutusIndex = e
			},
			pageTo(path) {
				vk.navigateTo(path);
			}
		},
		// 过滤器
		filters: {

		},
		// 计算属性
		computed: {

		}
	}
</script>
<style lang="scss" scoped>
	// logo开始
	.group_2 {
		z-index: 9999;
		color: rgb(34, 34, 34);
		font-size: 24rpx;
		position: absolute;
		left: 30rpx;
		top: 60rpx;
		line-height: 29rpx;
		white-space: nowrap;

		.image {
			border-radius: 50%;
			width: 60rpx;
			height: 60rpx;
		}

		.text {
			margin-left: 6rpx;
			align-self: center;
			font-weight: 900;
		}
	}

	// logo结束

	// 案例开始
	.dcase {
		padding-top: 34rpx;

		.group_7 {
			margin-top: 21rpx;
			padding: 0 8rpx;

			.image_3 {
				align-self: center;
				border-radius: 6rpx;
				filter: drop-shadow(0px 10rpx 10rpx #0000000d);
				width: 92vw;
				height: 58.5vw;
			}

			.group_8 {
				margin-top: 20rpx;
				padding: 0 22rpx;

				.text_5 {
					color: rgb(34, 34, 34);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_6 {
					text-transform: uppercase;
				}

				.text_7 {
					margin-right: 10rpx;
					margin-top: 10rpx;
					color: rgb(153, 153, 153);
					font-size: 20rpx;
					line-height: 34rpx;
					text-align: left;
				}
			}

			.list {
				margin-top: 26rpx;

				.list-item {
					padding: 10rpx 14rpx 10rpx 22rpx;
					flex: 1 1 366rpx;

					.image_4 {
						border-radius: 6rpx;
						filter: drop-shadow(0px 10rpx 10rpx #0000000d);
						width: 330rpx;
						height: 300rpx;
					}

					.text_8 {
						margin-top: 20rpx;
						color: rgb(34, 34, 34);
						font-size: 28rpx;
						font-weight: 500;
						line-height: 40rpx;
						white-space: nowrap;
					}

					.text_10 {
						margin-right: 10rpx;
						margin-top: 10rpx;
						color: rgb(153, 153, 153);
						font-size: 20rpx;
						line-height: 34rpx;
						text-align: left;
						text-transform: uppercase;
					}
				}
			}

			.button {
				align-self: center;
				color: $style-color;
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
				padding: 17rpx 0;
				background-color: rgb(255, 255, 255);
				box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 35rpx;
				border: solid 2rpx $style-color;

				.text_14 {
					margin-left: 75rpx;
				}

				.image_7 {
					margin: 8rpx 75rpx 8rpx 10rpx;
					width: 10rpx;
					height: 16rpx;
				}
			}

			.section_3 {
				margin-top: 34rpx;
			}
		}

		.left-section {
			background-color: $style-color;
			border-radius: 0px 6rpx 6rpx 0px;
			width: 6rpx;
			height: 31rpx;
		}

		.view {
			margin-top: 21rpx;
		}

		.group_6 {
			margin-left: 24rpx;
			width: 182rpx;
			position: relative;

			.image_2 {
				margin-left: 10rpx;
				width: 92rpx;
				height: 92rpx;
			}

			.text_3 {
				color: rgb(34, 34, 34);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				white-space: nowrap;
				position: absolute;
				left: 0;
				top: 16rpx;
			}

			.text_4 {
				color: rgb(153, 153, 153);
				font-size: 18rpx;
				font-weight: 200;
				line-height: 25rpx;
				white-space: nowrap;
				text-transform: uppercase;
				position: absolute;
				left: 0;
				right: 0;
				top: 58rpx;
			}
		}
	}

	// 案例结束

	// 产品开始
	.dproduct {
		margin-top: 45rpx;

		.group_14 {
			margin-top: 30rpx;

			.group_15 {
				margin-top: 30rpx;
				padding: 0 30rpx;
				height: 240rpx;
				position: relative;

				.text_21 {
					color: rgb(153, 153, 153);
					font-size: 20rpx;
					line-height: 34rpx;
					text-align: left;
					text-transform: uppercase;
					width: 320rpx;
					position: absolute;
					left: 390rpx;
					top: 50rpx;
				}

				.text_22 {
					color: rgb(34, 34, 34);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;
					position: absolute;
					left: 30rpx;
					top: 0;
				}

				.text_23 {
					color: rgb(153, 153, 153);
					font-size: 20rpx;
					line-height: 34rpx;
					text-align: left;
					text-transform: uppercase;
					width: 320rpx;
					position: absolute;
					left: 30rpx;
					top: 50rpx;
				}

				.image_12 {
					border-radius: 6rpx;
					width: 330rpx;
					height: 240rpx;
					position: absolute;
					left: 390rpx;
					top: 0;
				}

				.text_26 {
					color: rgb(34, 34, 34);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;
					text-transform: uppercase;
					position: absolute;
					left: 30rpx;
					top: 0;
				}

				.text_27 {
					color: rgb(153, 153, 153);
					font-size: 20rpx;
					line-height: 34rpx;
					text-align: left;
					text-transform: uppercase;
					width: 340rpx;
					position: absolute;
					left: 30rpx;
					top: 50rpx;
				}
			}

			.view_3 {
				margin-top: 0;
			}

			.group_16 {
				margin-top: 30rpx;
				padding-left: 30rpx;
				padding-right: 20rpx;
				height: 240rpx;
				position: relative;

				.text_25 {
					color: rgb(153, 153, 153);
					font-size: 20rpx;
					line-height: 34rpx;
					text-align: left;
					text-transform: uppercase;
					width: 340rpx;
					position: absolute;
					right: 20rpx;
					top: 50rpx;
				}
			}

			.image_10 {
				border-radius: 6rpx;
				width: 330rpx;
				height: 240rpx;
				position: absolute;
				left: 30rpx;
				top: 0;
			}

			.text_19 {
				color: rgb(34, 34, 34);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				white-space: nowrap;
				position: absolute;
				left: 390rpx;
				top: 0;
			}
		}

		.button {
			align-self: center;
			color: $style-color;
			font-size: 24rpx;
			line-height: 33rpx;
			white-space: nowrap;
			padding: 17rpx 0;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.05);
			border-radius: 35rpx;
			border: solid 2rpx $style-color;

			.text_14 {
				margin-left: 75rpx;
			}

			.image_7 {
				margin: 8rpx 75rpx 8rpx 10rpx;
				width: 10rpx;
				height: 16rpx;
			}
		}

		.section_4 {
			margin-top: 38rpx;
		}

		.group_13 {
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;

			.left-section {
				background-color: $style-color;
				border-radius: 0px 6rpx 6rpx 0px;
				width: 6rpx;
				height: 31rpx;
			}

			.view_1 {
				margin-top: 20rpx;
			}

			.right-group {
				margin-left: 24rpx;
				width: 112rpx;
				position: relative;

				.image_9 {
					width: 60rpx;
					height: 60rpx;
				}

				.text_16 {
					position: absolute;
					left: 0;
					right: 0;
					top: 15rpx;
				}
			}
		}

		.text_6 {
			text-transform: uppercase;
		}

		.text_18 {
			margin-left: 30rpx;
			color: rgb(153, 153, 153);
			font-size: 18rpx;
			font-weight: 200;
			line-height: 25rpx;
			white-space: nowrap;
		}
	}

	// 产品结束

	// 关于我们-开始
	.group_17 {
		margin-top: 45rpx;

		.bottom-group {
			padding: 0 30rpx;

			.image_18 {
				align-self: center;
				border-radius: 6rpx 6rpx 0px 0px;
				width: 92vw;
				height: 76vw;
			}

			.group_20 {
				padding-top: 322rpx;
				position: relative;

				.section_5 {
					margin: 0 15rpx;
					background-color: rgba(0, 0, 0, 0.11);
					filter: blur(6rpx);
					border-radius: 25rpx;
					height: 61rpx;
				}

				.section_6 {
					padding-left: 40rpx;
					padding-right: 35rpx;
					background-color: $style-color;
					border-radius: 0px 0px 6rpx 6rpx;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;

					.group_25 {
						padding: 18rpx 0 32rpx;
						color: rgb(255, 255, 255);
						font-size: 24rpx;
						line-height: 48rpx;
						height: 220rpx;
						overflow: hidden;
						// white-space: nowrap;
					}

					.group_22 {
						padding: 30rpx 0 14rpx;

						.group_24 {
							margin-right: 5rpx;
							margin-top: 27rpx;

							.section_7 {
								border-radius: 50%;
								width: 14rpx;
								height: 14rpx;
								border: solid 3rpx rgb(255, 255, 255);
							}

							.section_8 {
								margin-left: 20rpx;
								background-color: rgba(255, 255, 255, 0.6);
								border-radius: 50%;
								width: 14rpx;
								height: 14rpx;
							}
						}

						.text_31 {
							color: rgb(255, 255, 255);
							font-size: 48rpx;
							font-weight: 500;
							line-height: 67rpx;
							white-space: nowrap;
						}

						.text_32 {
							margin-top: 9rpx;
							color: rgb(255, 255, 255);
							font-size: 24rpx;
							line-height: 33rpx;
							white-space: nowrap;
						}
					}

					.section_9 {
						background-color: rgb(255, 255, 255);
						width: 48rpx;
						height: 6rpx;
					}

					.divider_2 {
						margin-right: 5rpx;
						margin-top: 3rpx;
						flex: 1 1 auto;
						background-color: rgb(255, 255, 255);
						height: 2rpx;
					}
				}
			}

			.button {
				align-self: center;
				color: $style-color;
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
				padding: 17rpx 0;
				background-color: rgb(255, 255, 255);
				box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 35rpx;
				border: solid 2rpx $style-color;

				.text_14 {
					margin-left: 75rpx;
				}

				.image_7 {
					margin: 8rpx 75rpx 8rpx 10rpx;
					width: 10rpx;
					height: 16rpx;
				}
			}

			.section_10 {
				margin-top: 25rpx;
			}
		}

		.s_aboutus {
			margin-top: 30rpx;
		}

		.group_19 {
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;

			.left-section {
				background-color: $style-color;
				border-radius: 0px 6rpx 6rpx 0px;
				width: 6rpx;
				height: 31rpx;
			}

			.view_6 {
				margin-top: 20rpx;
			}

			.right-group {
				margin-left: 24rpx;
				width: 112rpx;
				position: relative;

				.image_17 {
					width: 69rpx;
					height: 60rpx;
				}

				.text_16 {
					position: absolute;
					left: 0;
					right: 0;
					top: 15rpx;
				}
			}
		}

		.text_30 {
			margin-left: 30rpx;
			color: rgb(153, 153, 153);
			font-size: 18rpx;
			font-weight: 200;
			line-height: 25rpx;
			white-space: nowrap;
		}

		.text_6 {
			text-transform: uppercase;
		}
	}

	// 关于我们-结束

	// 发展历程-开始
	.dhistory {
		position: relative;

		.group_33 {
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;

			.left-section {
				background-color: $style-color;
				border-radius: 0px 6rpx 6rpx 0px;
				width: 6rpx;
				height: 31rpx;
			}

			.view_14 {
				margin-top: 19rpx;
			}

			.group_34 {
				margin-left: 24rpx;
				padding-top: 28rpx;
				width: 112rpx;
				position: absolute;

				.image_25 {
					width: 60rpx;
					height: 31rpx;
				}

				.image_26 {
					width: 56rpx;
					height: 30rpx;
					position: absolute;
					top: 0;
					left: 50%;
					transform: translateX(-50%);
				}

				.text_41 {
					position: absolute;
					left: 0;
					right: 0;
					top: 14rpx;
				}
			}
		}

		.text_6 {
			text-transform: uppercase;
		}

		.text_42 {
			margin-left: 30rpx;
			color: rgb(153, 153, 153);
			font-size: 18rpx;
			font-weight: 200;
			line-height: 25rpx;
			white-space: nowrap;
		}

		// item
		.group_43 {
			left: 0;
			right: 0;
			top: 0;
			position: relative;
			margin-bottom: 100rpx;

			.group_44 {
				padding: 30rpx 30rpx 0;

				.group_45 {
					padding-bottom: 9rpx;
					color: rgb(34, 34, 34);
					font-size: 36rpx;
					font-weight: 900;
					line-height: 46rpx;
					white-space: nowrap;
					width: 99rpx;
					position: relative;

					.image_27 {
						margin-bottom: 5rpx;
						width: 46rpx;
						height: 46rpx;
					}

					.image_34 {
						margin-bottom: 0;
					}

					.text_51 {
						text-transform: uppercase;
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}

				.text_52 {
					margin-top: 23rpx;
					color: rgb(34, 34, 34);
					font-size: 20rpx;
					line-height: 28rpx;
					white-space: nowrap;
				}

				.section_15 {
					margin-left: 33rpx;
					margin-top: 33rpx;
					flex: 1 1 auto;
					background-color: rgb(204, 204, 204);
					height: 2rpx;
				}
			}

			.group_46 {
				padding: 28rpx 30rpx 0;
				color: rgb(34, 34, 34);
				font-size: 24rpx;
				line-height: 36rpx;

				.image_29 {
					border-radius: 6rpx;
					filter: drop-shadow(0px 10rpx 10rpx #0000000d);
					width: 330rpx;
					height: 150rpx;
				}

				.image_35 {
					flex: 1 1 330rpx;
				}

				.text_53 {
					margin-left: 24rpx;
					flex: 1 1 330rpx;
					text-align: left;
				}
			}

			.text_6 {
				text-transform: uppercase;
			}

			// 查看更多
			.button_1 {
				padding: 17rpx 0;
				color: $style-color;
				font-size: 24rpx;
				line-height: 33rpx;
				background-color: rgb(255, 255, 255);
				box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 35rpx;
				width: 270rpx;
				position: absolute;
				left: 50%;
				bottom: -100rpx;
				transform: translateX(-50%);
				border: solid 2rpx $style-color;

				.image_7 {
					margin: 8rpx 75rpx 8rpx 10rpx;
					width: 10rpx;
					height: 16rpx;
				}

				.image_37 {
					margin: 8rpx 0 8rpx 10rpx;
				}
			}
		}


	}

	// 发展历程-结束

	// 新闻动态-开始
	.dnews {
		margin-top: 45rpx;

		.group_51 {
			padding: 26rpx 30rpx 0;

			.text_60 {
				margin-right: 10rpx;
				margin-top: 16rpx;
				color: rgb(102, 102, 102);
				font-size: 20rpx;
				line-height: 35rpx;
				text-align: left;
			}

			.right-section {
				margin-top: 27rpx;
				margin-bottom: 27rpx;
				background-color: rgb(204, 204, 204);
				height: 2rpx;
			}

			.group_53 {
				margin-top: 29rpx;

				.text_61 {
					color: rgb(34, 34, 34);
					font-size: 24rpx;
					font-weight: 500;
					line-height: 33rpx;
					white-space: nowrap;
				}

				.text_62 {
					margin-top: 11rpx;
					color: rgb(153, 153, 153);
					font-size: 20rpx;
					font-weight: 200;
					line-height: 28rpx;
					white-space: nowrap;
				}
			}

			.text_63 {
				margin-top: 16rpx;
				color: rgb(102, 102, 102);
				font-size: 20rpx;
				line-height: 35rpx;
				text-align: left;
			}

			.button {
				align-self: center;
				color: $style-color;
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
				padding: 17rpx 0;
				background-color: rgb(255, 255, 255);
				box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 35rpx;
				border: solid 2rpx $style-color;

				.text_14 {
					margin-left: 75rpx;
				}

				.image_7 {
					margin: 8rpx 75rpx 8rpx 10rpx;
					width: 10rpx;
					height: 16rpx;
				}
			}

			.section_15 {
				margin-top: 38rpx;
			}

			.text_58 {
				color: rgb(34, 34, 34);
				font-size: 24rpx;
				font-weight: 500;
				line-height: 33rpx;
				white-space: nowrap;
			}

			.text_59 {
				margin-top: 11rpx;
				color: rgb(153, 153, 153);
				font-size: 20rpx;
				font-weight: 200;
				line-height: 28rpx;
				white-space: nowrap;
			}
		}

		.group_50 {
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;

			.left-section {
				background-color: $style-color;
				border-radius: 0px 6rpx 6rpx 0px;
				width: 6rpx;
				height: 31rpx;
			}

			.view_20 {
				margin-top: 20rpx;
			}

			.right-group {
				margin-left: 24rpx;
				width: 112rpx;
				position: relative;

				.image_38 {
					width: 53rpx;
					height: 58rpx;
				}

				.text_16 {
					position: absolute;
					left: 0;
					right: 0;
					top: 15rpx;
				}
			}
		}

		.text_57 {
			margin-left: 30rpx;
			color: rgb(153, 153, 153);
			font-size: 18rpx;
			font-weight: 200;
			line-height: 25rpx;
			white-space: nowrap;
		}

		.text_6 {
			text-transform: uppercase;
		}
	}

	// 新闻动态-结束

	// 合作伙伴-开始
	.group_54 {
		margin-top: 45rpx;

		.group_57 {
			padding-top: 31rpx;

			.grid {
				margin: 0 30rpx;
				height: 510rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-row-gap: 32rpx;
				grid-column-gap: 32rpx;

				.image_29 {
					border-radius: 6rpx;
					filter: drop-shadow(0px 10rpx 10rpx #0000000d);
					width: 330rpx;
					height: 150rpx;
				}
			}
		}

		.group_56 {
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;

			.left-section {
				background-color: $style-color;
				border-radius: 0px 6rpx 6rpx 0px;
				width: 6rpx;
				height: 31rpx;
			}

			.view_22 {
				margin-top: 20rpx;
			}

			.right-group {
				margin-left: 24rpx;
				width: 112rpx;
				position: relative;

				.image_40 {
					width: 68rpx;
					height: 58rpx;
				}

				.text_16 {
					position: absolute;
					left: 0;
					right: 0;
					top: 15rpx;
				}
			}
		}

		.text_6 {
			text-transform: uppercase;
		}

		.text_66 {
			margin-left: 30rpx;
			color: rgb(153, 153, 153);
			font-size: 18rpx;
			font-weight: 200;
			line-height: 25rpx;
			white-space: nowrap;
		}
	}

	// 合作伙伴-结束

	//联系我们-开始
	.group_58 {

		.bottom-group {
			padding: 0 30rpx;

			.text-wrapper_1 {
				margin-top: 28rpx;
				color: rgb(204, 204, 204);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;
				padding: 23rpx 0 22rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 4rpx;
				border: solid 2rpx $style-color;

				.text_69 {
					margin-left: 28rpx;
				}
			}

			.view_27 {
				margin-top: 0;
			}

			.text-wrapper_2 {
				margin-top: 28rpx;
				padding: 23rpx 0 145rpx;
				color: rgb(204, 204, 204);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;
				background-color: rgb(255, 255, 255);
				border-radius: 7rpx;
				border: solid 2rpx $style-color;

				.text_74 {
					margin-left: 28rpx;
				}
			}

			.button_2 {
				margin-top: 30rpx;
				padding: 23rpx 0 24rpx;
				color: rgb(255, 255, 255);
				font-size: 30rpx;
				line-height: 42rpx;
				white-space: nowrap;
				background-color: rgb(102, 102, 102);
				border-radius: 4rpx;
			}
		}

		.view_26 {
			margin-top: 42rpx;
		}

		.section_16 {
			margin-top: 60rpx;
			padding: 30rpx 30rpx 41rpx;
			background-color: $style-color;

			.text_76 {
				color: rgb(255, 255, 255);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				white-space: nowrap;
			}

			.text_77 {
				margin-top: 20rpx;
				color: rgb(255, 255, 255);
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
			}

			.text_78 {
				margin-top: 21rpx;
				color: rgb(255, 255, 255);
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
			}

			.text_79 {
				margin-top: 21rpx;
				color: rgb(255, 255, 255);
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
			}

			.text_80 {
				margin-top: 21rpx;
				color: rgb(255, 255, 255);
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
			}

			.text_81 {
				margin-top: 21rpx;
				color: rgb(255, 255, 255);
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
			}
		}

		.text-wrapper_3 {
			padding: 21rpx 0;
			color: rgb(204, 204, 204);
			font-size: 20rpx;
			line-height: 28rpx;
			white-space: nowrap;
			background-color: rgb(240, 240, 240);
		}

		.group_60 {
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;

			.left-section {
				background-color: $style-color;
				border-radius: 0px 6rpx 6rpx 0px;
				width: 6rpx;
				height: 31rpx;
			}

			.view_24 {
				margin-top: 20rpx;
			}

			.right-group {
				margin-left: 24rpx;
				width: 112rpx;
				position: relative;

				.image_47 {
					width: 55rpx;
					height: 60rpx;
				}

				.text_16 {
					position: absolute;
					left: 0;
					right: 0;
					top: 15rpx;
				}
			}
		}

		.text_6 {
			text-transform: uppercase;
		}

		.text_68 {
			margin-left: 30rpx;
			color: rgb(153, 153, 153);
			font-size: 18rpx;
			font-weight: 200;
			line-height: 25rpx;
			white-space: nowrap;
		}
	}

	//联系我们-结束

	//公司介绍-开始
	.s_introduce {
		margin-top: 45rpx;

		.group_29 {
			padding-left: 30rpx;
			padding-right: 24rpx;

			.group_30 {
				padding: 30rpx 0 35rpx;
				color: rgb(102, 102, 102);
				font-size: 24rpx;
				line-height: 40rpx;

				.text_39 {
					margin-top: 28rpx;
					text-align: left;
				}
			}

			.button {
				align-self: center;
				color: $style-color;
				font-size: 24rpx;
				line-height: 33rpx;
				white-space: nowrap;
				padding: 17rpx 0;
				background-color: rgb(255, 255, 255);
				box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 35rpx;
				border: solid 2rpx $style-color;

				.text_14 {
					margin-left: 75rpx;
				}

				.image_7 {
					margin: 8rpx 75rpx 8rpx 10rpx;
					width: 10rpx;
					height: 16rpx;
				}
			}
		}

		.group_28 {
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;

			.left-section {
				background-color: $style-color;
				border-radius: 0px 6rpx 6rpx 0px;
				width: 6rpx;
				height: 31rpx;
			}

			.view_12 {
				margin-top: 20rpx;
			}

			.right-group {
				margin-left: 24rpx;
				width: 112rpx;
				position: relative;

				.image_20 {
					width: 60rpx;
					height: 59rpx;
				}

				.text_37 {
					position: absolute;
					left: 0;
					right: 0;
					top: 15rpx;
				}
			}
		}

		.text_38 {
			margin-left: 30rpx;
			color: rgb(153, 153, 153);
			font-size: 18rpx;
			font-weight: 200;
			line-height: 25rpx;
			white-space: nowrap;
		}

		.text_6 {
			text-transform: uppercase;
		}
	}

	//公司介绍-结束
	
	.share-img-button{
		position: fixed;
		right: 12upx;
		bottom: 200upx;
		z-index: 99999999;
		font-size: 20rpx;
		border-radius: 50%;
		padding: 0;
		margin: 0;
		width: 80rpx;
		height: 80rpx;
		border: none;
		background-color: #d19a60;
		background-image: url("/static/kefu.png");
		
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>
